<template>
	<view class="container">
		<QSTabs ref="tabs" :tabs="tabs" animationMode="line3" :current="current" @change="change" activeColor="#adadad"
		 :minWidth="250" animationLineWidth="30"  space="20" lineColor="#f1505c" swiperWidth="750">
		</QSTabs>
		<view class="filter" @tap="open">
			<image src="../../../static/mall/rg_icon.png" mode="" class="filter-img"></image>
		</view>
		<uni-popup ref="showpopup" type="top" :show="showhide" :custom="true">
			<view class="popup-box">
				<view @tap="selectbox(index,item)" class="menu-box" v-for="(item,index) in tabs" :key="index" :class="num === index? 'menu-active': '' ">{{item.cat_name}}</view>
			</view>
		</uni-popup>
		<view class="select-box">
			<view style="width: 100%;">
				<!-- 筛选插件 -->
				<HMfilterDropdown :filterData="filterData" :defaultSelected="filterDropdownValue" :updateMenuName="false" @confirm="confirm"></HMfilterDropdown>
			</view>
		</view>
		<view class="place"></view>
		<swiper class="swiper-height" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view class="scroll-items">
						<view class="scroll-item" v-for="(ite, ind) in listdata" :key="ind" @tap="gogoodsdetailds(ite.appoint_id,ite.is_autotrophic)">
							<view class="scroll-item-image-box">
								<image :src="ite.list_pic" mode="aspectFill" class="scroll-item-image"></image>
							</view>
							<view class="scroll-item-text-box">
								<view class="flex-between">
									<view class="title">{{ite.appoint_name}}&nbsp;{{ite.appoint_content}}</view>
									<view class="tips" v-if="ite.appoint_type == 0">到店服务</view>
									<view class="tips" v-if="ite.appoint_type == 1">上门服务</view>
								</view>
								<view class="flex-start">
									<view class="title1">已预约{{ite.appoint_sum}}</view>
									<view class="flex-start" style="border: 2rpx solid #F04517;">
										<view class="text">评分</view>
										<view class="text1">{{ite.score_mean}}</view>
									</view>
									<view class="title2">态度好</view>
								</view>
								<view class="flex-start">
									<view class="title3">￥{{ite.appoint_price}}</view>
									<view class="tips1" v-if="ite.payment_status == 0">一口价</view>
									<view class="tips1" v-if="ite.payment_status == 1">预付金</view>
								</view>
								<view class="cell"></view>
								<view class="">
									{{ite.merchant_name}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="fixed-bottom">
			<view class="flex-start">
				<image src="../../../static/images/dingwei.png" mode="" style="width: 30rpx;height: 30rpx;display: block;"></image>
				<view class="title" style="color: #F04517;">亚夏汽车大厦</view>
			</view>
			<image src="../../../static/images/right.png" mode="" style="width: 30rpx;height: 30rpx;display: block;"></image>
		</view>
		<view class="tip_box_no_data" v-if="no_data">
			<image class="no_data_img" src="../../../static/images/no_data.png"></image>
			<view class='no_tip_content'>没搜到相关记录</view>
		</view>
	</view>
</template>

<script>
	import uniPopup from '../../../appComponent/uni/uni-popup/uni-popup.vue'
	import HMfilterDropdown from '../component/HM-filterDropdown/HM-filterDropdown.vue'
	import helangCheckbox from "../../../appComponent/uni/helang-checkbox/helang-checkbox.vue"
	import QSTabs from '../component/QS-tabs/QS-tabs.vue';
	import slFilter from '../component/sl-filter/sl-filter.vue';
	//筛选模拟数据
	import data from '../../../utils/data.js';
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const Sys = uni.getSystemInfoSync();
	const wH = Sys.windowHeight;
	let n = 1;
	let dragBox;
	const getGoodslist = () => {
		common.post('Appoint_new&a=ajaxList', {
			cat_url: _this.cat_url,
		}, data => {
			console.log("nnnnnnn", data)
			_this.listdata= data.appoint_list.list;
		});
	};
	const getfilterDropdown = () => {
		common.post('Appoint_new&a=screening_conditions', {
			type: "category",
			cat_url: _this.cat_url,
		}, data => {
			console.log("nnnnnnn", data)
			_this.tabs = data.two_category;
			_this.cat_urllist = _this.tabs.map( item => {
					return item.cat_url
			})
			console.log("dddddddddddddd", _this.cat_urllist)
			console.log("bbbbbbbbbbb", _this.cat_url)
			console.log("cccccccccccccc",_this.cat_urllist.indexOf(_this.cat_url));
			console.log("看看tabs的数据",_this.tabs)
			_this.num = _this.cat_urllist.indexOf(_this.cat_url);
			_this.swiperCurrent = _this.cat_urllist.indexOf(_this.cat_url);
			console.log("_this.swiperCurrent",_this.swiperCurrent)
		});
	};
	// const getcate = () => {
	// 	common.post('HouseApi&a=qrcode_cate', {
	// 		village_id: _this.village_id,
	// 	}, data => {
	// 		console.log('++++', data)
	// 		_this.listdata = data.cate_list;
	// 		let menuList = [];
	// 		let msg = {};
	// 		msg['detailList'] = [];
	// 		for (let i in _this.listdata) {
	// 			if (_this.listdata[i]) {
	// 				let arr = {};
	// 				arr['title'] = _this.listdata[i].cate_name;
	// 				arr['value'] = _this.listdata[i].cate_id;
	// 				msg['detailList'].push(arr);
	// 			}
	// 		}
	// 		msg['title'] = '记录类别';
	// 		msg['detailTitle'] = '请选择类型';
	// 		msg['isMutiple'] = false;
	// 		msg['key'] = 'cate_id';
	// 		msg['defaultSelectedIndex'] = 0;
	// 		menuList.push(msg)
	// 		_this.menuList = menuList;
	// 		_this.$forceUpdate();
	// 		console.log("hhhhhhhhhhhhhhhhhhhh", _this.menuList);

	// 	});
	// };
	const tabs = Array(30).fill('').map(() => '' + Array(n).fill('').join('') + n++);
	export default {
		components: {
			QSTabs,
			slFilter,
			helangCheckbox,
			HMfilterDropdown,
			uniPopup
		},
		data() {
			return {
				tabs: [...tabs],
				indexArr:'',
				valueArr:'',
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				//抽屉
				options: {
					visible: false,
					rightMode: true,
					width: 90,
					autoClose: true
				},

				listdata: {},
				numlist: {},
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				btn_style: '',
				num: 0,
				no_data: false,
				itemWidth: '25%',
				record_log_count: '',
				QSTabsWxsListHeight: '',
				list: [{
						text: '正常'
					},
					{
						text: '异常'
					}
				],
				isOpen: [],
				filterDropdownValue: [],
				filterData: [],
				cat_id:'',
				cat_url:'',
				showhide:false,
				cat_urllist:[],
			}
		},
		filters: {
			outData(value) {
				return JSON.stringify(value);
			}
		},
		onReady() {
			//执行计算组件高度方法
			dragBox = this.$refs.dragBox;

		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},
		onLoad(options) {
			_this = this;
			_this.cat_id = options.cat_id;
			_this.cat_url = options.cat_url;
			// #ifdef H5
			console.log('准备跳小程序页', _this.id);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif
			
			common.setMainColor(_this, function(config) {
				_this.actcolor = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor +
					';';

				// const res = uni.getStorageSync('village_key');
				// if (res) {
				// 	_this.village_id = res.village_id;
				// 	_this.pigcms_id = res.pigcms_id;
				// 	_this.village_name = res.village_name;
				// };
				getGoodslist();
				getfilterDropdown();
				// console.log("5555",tabs)
			});
			console.log("data++++++++++",data)
			setTimeout(() => {
				_this.filterDropdownValue = [
					[1, 1, 0],
					[0, 1],
					[1],
					[
						[0],
						[1, 2, 7],
						[1, 0]
					]
				];
				_this.filterData = data;
			}, 100);
			//模拟ajax请求子菜单数据。
			setTimeout(() => {
				_this.filterData[1].submenu[0].submenu = [{
					"name": "附近",
					"value": "附近"
				}, {
					"name": "1km",
					"value": "1km"
				}, {
					"name": "2km",
					"value": "2km"
				}, {
					"name": "3km",
					"value": "3km"
				}, {
					"name": "4km",
					"value": "4km"
				}, {
					"name": "5km",
					"value": "5km"
				}];
			}, 2000)
		},
		methods: {
			change(index,item) {
				console.log("heiheihhhh",item.cat_url);
				_this.showhide = false;
				_this.cat_url = item.cat_url;
				getGoodslist();
				_this.swiperCurrent = index;
				_this.num = index;
				
			},
			transition({
				detail: {
					dx
				}
			}) {
				_this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				_this.$refs.tabs.setFinishCurrent(current);
				_this.swiperCurrent = current;
				_this.current = current;
			},
			confirm(e) {
				_this.indexArr = e.index
				_this.valueArr = e.value
			},
			//商品详情页
			gogoodsdetailds(appoint_id,is_autotrophic){
				if(is_autotrophic == 0){
					uni.navigateTo({
						url:'/pages/appoint/goods/productDetail?appoint_id=' + appoint_id
					})
				}else{
					uni.navigateTo({
						url: '/pages/appoint/goods/goodsDetail?appoint_id=' + appoint_id
					})
				}
				
			},
			open(){
				_this.showhide = !_this.showhide
			},
			selectbox(index,item){
				_this.num = index;
				_this.swiperCurrent = index;
				console.log("heiheihhhh",item.cat_url);
				_this.cat_url = item.cat_url;
				getGoodslist();
				_this.showhide = false
			}
		},

	}
</script>

<style>
	page {
		background: rgb(245, 245, 245);
	}

	.container {
		margin: 0;
		padding: 0;
		height: 100%;
	}
	.place {
		background-color: #ffffff;
		height: 88px;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}
	.QS-tabs-box {
		width: 100%;
		position: sticky;
		top: 0;
		z-index: 10;
		background-color: white;
	}

	.swiper-item {
		/* background-color: #fff; */
	}

	.scroll-items {
		display: flex;
		flex-direction: column;
		/* width: 100%; */
	}

	.scroll-item {
		margin-top: 15rpx;
		padding: 20rpx;
		background-color: white;
		border-radius: 8rpx;
		/* width: 100%; */
		/* align-items: center; */
		display: flex;
		flex-direction: row;
		border: 1px solid #f8f8f8;
	}

	.scroll-item-image-box {
		flex-grow: 0;
	}

	.scroll-item-text-box {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 28rpx;
		/* font-weight: bold; */
		margin-left: 15rpx;
	}

	.scroll-item-image {
		border-radius: 4rpx;
		width: 180rpx;
		height: 180rpx;
		margin-top: 15rpx;
	}

	.select-box {
		display: flex;
		flex-direction: row;
		overflow: hidden;
	}

	.filter {
		position: fixed;
		right: 15rpx;
		line-height: 48px;
		z-index: 99999;
	}
	.filter-img {
		width: 30rpx;
		height: 30rpx;
		transform: rotate(90deg);
	}
	.popup-box {
		padding: 15rpx;
	}

	.flex-between {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		font-size: 30rpx;
		font-weight: 700;
		line-height: 55rpx;
	}

	.tips {
		border: 2rpx solid #F04517;
		color: #F04517;
		font-size: 24rpx;
		line-break: 24rpx;
		padding: 0 5rpx;
	}

	.flex-start {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.title1 {
		font-size: 26rpx;
		margin-right: 15rpx;
	}

	.text {
		color: #F04517;
		font-size: 20rpx;
		line-break: 24rpx;
		padding: 0 3rpx;
	}

	.text1 {
		color: #FFFFFF;
		background-color: #F04517;
		font-size: 20rpx;
		line-break: 24rpx;
		padding: 0 3rpx;
	}

	.title2 {
		color: #F04517;
		font-size: 24rpx;
		line-break: 24rpx;
		margin-left: 15rpx;
	}

	.title3 {
		font-size: 30rpx;
		font-weight: 700;
		color: red;
		margin-right: 15rpx;
	}

	.tips1 {
		background: red;
		color: #FFFFFF;
		font-size: 20rpx;
		line-break: 24rpx;
		padding: 0 5rpx;
	}

	.cell {
		width: 100%;
		height: 2rpx;
		background: #F1F1F1;
		margin: 5rpx 0;
	}

	.fixed-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		padding: 0 15rpx;
		width: 96.5%;
		background: #F0AD4E;
	}
	.swiper-height {
		height: calc(100vh - 210rpx);
	}
	.popup-box {
		position: absolute;
		width: 100%;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.menu-box {
		width: 200rpx;
		height: 70rpx;
		font-size: 20rpx;
		line-height: 70rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		background-color: #F1F1F1;
		text-align: center;
	}
	.menu-active {
		width: 196rpx;
		height: 66rpx;
		border: 2rpx solid #E42424;
		font-size: 20rpx;
		line-height: 66rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		background-color: #FFFFFF;
		text-align: center;
	}
	.menu-box:nth-child(-n+3){
		margin-top: 0rpx;
	}
	/deep/ .uni-popup {
		top: 80rpx;
	}
	/deep/ .HMfilterDropdown {
		top: 80rpx;
	}
	/deep/ .QS-tabs {
		position: fixed;
		background-color: rgba(255, 255, 255, 1) !important;
		z-index: 998 !important;
	}
</style>
